<template>
  <view class="content">
    <view v-if="state.loading"></view>
    <view class="no-data t-c" v-else-if="!state.dataSource.length">
      <image class="img" src="../../static/no-data.svg"></image>
      <view class="gray9 fz30">暂无订单</view>
    </view>
    <template v-else>
      <!-- 取包 -->
      <view class="info fz30 bg-white bdr20" v-for="item in state.dataSource" :key="item.id" @click="$jump.navigateTo(`/pages/take/details?orderId=${item.orderId}`)">
        <view class="item flex fz32 flex-x-between">
          <view>
            <view>
              <text class="fz40 main-theme-color mr10 bold">{{ item.otherName }}</text>
              {{ cellTypeOptions[item.cellType] }}
            </view>
            <view>{{ item.networkName }}</view>
          </view>
          <view class="main-theme-color">订单详情</view>
        </view>
        <view class="item flex fz32 flex-x-between">
          <view>网点地址</view>
          <view>{{ item.netWorkDetailAddress }}</view>
        </view>
        <view class="item flex fz32 flex-x-between">
          <view>寄存时间</view>
          <view>{{ item.createTime }}</view>
        </view>
        <view class="item flex fz32 flex-x-between">
          <view>使用时长</view>
          <view>{{ $filter.timeDifference(item.usedTime) }}</view>
        </view>

        <view class="btn-box flex flex-x-between">
          <button class="btn flex1 main-theme-bgcolor fff bdr10 t-c" @click.stop="onOpen(item, '1')">
            <view class="fz34">结束寄存</view>
            <view class="fz26">开门并结束</view>
          </button>
          <button class="btn flex1 bg-red fff bdr10 t-c" v-if="item.midwayPickTimes > 0" @click.stop="onOpen(item, '0')">
            <view class="fz34">中途开门</view>
            <view class="fz26">继续租用柜子</view>
          </button>
        </view>
      </view>
    </template>
  </view>
</template>

<script setup>
import { ref, reactive, getCurrentInstance } from 'vue';
import { onLoad } from '@dcloudio/uni-app';
import { queryUserOrder, openCell, closeOrder } from '@/common/js/getData.js';

const { proxy } = getCurrentInstance();

const billingMethod = {
  0: '免费',
  1: '按次计费',
  2: '按时计费'
};

const cellTypeOptions = {
  0: '小柜',
  1: '中柜',
  2: '大柜',
  3: '超大柜'
};

const state = reactive({
  loading: true,
  isSend: false,
  dataSource: []
});

// 页面加载完成
onLoad(async () => {
  await proxy.$onLaunched;
  loadData();
});

// 获取数据
const loadData = options => {
  const data = {
    orderStatus: 2
  };
  queryUserOrder(data, options)
    .then(res => {
      state.dataSource = res.result;
    })
    .finally(() => {
      state.loading = false;
    });
};

// 开柜
const sureOpen = (orderId, key) => {
  if (state.isSend) {
    return;
  }
  state.isSend = true;
  const data = {
    orderId,
    midwayPick: key
  };
  openCell(data)
    .then(res => {
      uni.showToast({
        icon: 'success',
        title: res.message
      });
      loadData({ hideLoad: true });
    })
    .finally(() => {
      state.isSend = false;
    });
};

// 开柜
const onOpen = (item, key) => {
  if (key === '1') {
    uni.showModal({
      title: '开门后，还要继续用柜吗？',
      content: '如果继续用柜，订单将会 持续计时',
      cancelText: '还要用',
      confirmText: '不用了',
      success: function(res) {
        if (res.confirm) {
          if (item.usedTime < 10 * 60 * 1000) {
            setTimeout(() => {
              uni.showModal({
                title: '提示',
                content: '您的柜门使用不到10分钟，请谨慎结束订单',
                cancelText: '取消',
                confirmText: '结束',
                success: function(res) {
                  if (res.confirm) {
                    sureOpen(item.orderId, key);
                  }
                }
              });
            }, 100);
          } else {
            sureOpen(item.orderId, key);
          }
        }
      }
    });
  } else {
    sureOpen(item.orderId, key);
  }
};
</script>

<style lang="less" scoped>
@import url('@/common/less/common.less');

.info {
  line-height: 50rpx;
  padding: 40rpx;
  margin: 20rpx;

  .item {
    padding: 10rpx 0;
  }

  .btn-box {
    padding-top: 10px;
    margin: 0 -20rpx;

    .btn {
      padding: 20rpx 0;
      margin: 0 20rpx;
    }
  }
}
</style>
